<template>
    <div class="rditype f-pr clear-block">
        <div class="boxes muti">
            <ul class="box clear-block " :class="currentDotIndex == index ? 'z-show' : ''"
                v-for="(item, index) in radioTypeData" key="index">
                <li v-for="(subItem, index) in item" key="index">
                    <a :href="subItem.categoryRoute" :class="!subItem.isNotActive && currentIndex == index ? 'z-sel' : ''"
                        @click="setCurrentIndex($event, index)">
                        <div class="icon" :style="`background-image: url(${subItem.backUrl});`"></div>
                        <em>{{ subItem.name }}</em>
                    </a>
                </li>
            </ul>
        </div>
        <span class="turn turn-left">向左</span>
        <span class="turn turn-right z-dis">向右</span>
        <div class="dotpage">
            <span class="dot" :class="currentDotIndex == index ? 'z-curr' : ''"
                v-for="(num, index) in radioTypeData.length" key="index" @click="setCurrentDotIndex(index)">{{ num
                }}</span>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
const props = defineProps({
    radioTypeData: Array
})

const currentIndex = ref(-1);
const currentDotIndex = ref(0);
const setCurrentIndex = ($event, index) => {
    $event.preventDefault();
    currentIndex.value = index;
}
const setCurrentDotIndex = (index) => {
    currentDotIndex.value = index;

}
</script>
<style lang="scss" scoped>
.rditype {
    margin-bottom: 20px;

    .boxes.muti {
        height: 194px;

    }

    .boxes {
        overflow: hidden;
        max-height: 194px;

        .box.z-show {
            display: block;

        }

        .box {
            display: none;
        }

        ul {
            margin-left: -33px;

            li {
                float: left;
                margin: 0 0 25px 33px;

                a.z-sel {
                    background-position: -70px 0;
                    color: #d35757;

                    &:hover {
                        background-position: -70px 0;
                        color: #d35757;
                    }

                    .icon {
                        background-position: -48px 0;
                    }
                }

                a {
                    display: block;
                    width: 70px;
                    height: 70px;
                    background-position: 0 9999px;
                    text-align: center;
                    color: #888;


                    &:hover {
                        background-position: 0 0;
                        text-decoration: none;
                    }

                    .icon {
                        width: 48px;
                        height: 48px;
                        margin: 2px auto 0;
                        background-position: 0 0;
                    }

                    em {
                        margin-top: -3px;
                    }
                }
            }
        }
    }


    .turn-left {
        left: -26px;
        background-position: 0 -30px;
    }

    .turn {
        position: absolute;
        top: 50%;
        width: 20px;
        height: 30px;
        margin-top: -15px;
        opacity: 0.25;
        text-indent: -9999px;
        cursor: pointer;

        &:hover {
            opacity: 0.4;
        }
    }


    .turn.z-dis {
        opacity: 0.08;
    }

    .turn-right {
        right: -26px;
        background-position: -30px -30px;
    }

    .dotpage {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 20px;
        text-align: center;
        line-height: 0;

        .dot {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-position: 0 0;
            text-indent: -9999px;
            cursor: pointer;
        }

        .dot.z-curr {
            background-position: -30px 0;
        }
    }


}
</style>